<template>
  <div class="jd_detail">
    <header-bar tittle="接单详情" />

    <div class="bg"></div>

    <div class="main">
      <div class="info">
        <div class="itemList u-flex-bet">
          <div class="u-flex">
            <van-image
              width="88rem"
              height="88rem"
              round
              :src="info.avatar ? info.avatar : defaults"
            />
            <div class="item">
              <div class="title1 u-flex">
                <div class="name">
                  {{ info.name }}
                </div>
              </div>
              <div class="title2">
                剩余数量:
                <span style="color: red;">{{ info.accept_num }}</span>
                /{{ info.num }}
              </div>
            </div>
          </div>

          <div class="statu">
            <div class="price">
              <div>{{ info.price }}</div>

              <van-image
                width="36rem"
                height="36rem"
                :src="require('@/assets/images/index/icon_coin@2x.png')"
              />
            </div>

            <div>
              <span
                v-if="kind == 1 && info.status == 5"
                class="statu_order"
                style="background: #09c6cd;"
                >完成</span
              >
              <span
                v-if="kind == 1 && info.status == 4"
                class="statu_order"
                style="background:#999"
                >维权中</span
              >
              <span
                v-if="kind == 1 && info.status == 3"
                class="statu_order"
                style="background:#ff4343"
                >未通过</span
              >
              <span
                v-if="kind == 1 && info.status == 2"
                class="statu_order"
                style="background:#999"
                >待确认</span
              >
              <span
                v-if="kind == 1 && info.status == 1"
                class="statu_order"
                style="background:#999"
                >待提交</span
              >
              <span
                v-if="!kind && info.status == 1"
                class="statu_order"
                style="background:#999"
                >待提交</span
              >
              <span
                v-if="!kind && info.status == 2"
                class="statu_order"
                style="background:#999"
                >待确认</span
              >
              <span
                v-if="!kind && info.status == 3"
                class="statu_order"
                style="background:#ff4343"
                >未通过</span
              >
              <span
                v-if="!kind && info.status == 4"
                class="statu_order"
                style="background:#999"
                >维权中</span
              >
              <span
                v-if="!kind && info.status == 5"
                class="statu_order"
                style="background: #09c6cd;"
                >完成</span
              >
            </div>
          </div>
        </div>
      </div>

      <div class="taskStep">
        <div class="title">详情</div>

        <div class="content">
          <div class="tips">
            1.将接发送给微信好友，在微信中打开链接完成助力任务
          </div>

          <div class="copy-box u-flex-bet">
            <div class="url u-flex">{{ info.task_link }}</div>
            <div
              class="btn u-flex"
              v-clipboard:copy="info.task_link"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >
              复制
            </div>
          </div>

          <div
            class="code"
            id="qrcode"
            ref="qrcode"
            style="display:inline-block;"
          ></div>

          <div class="tips">
            2.查看示例验证图，按照示例图的提示和要求正确截图上传
          </div>

          <div class="img-box u-flex-center">
            <div class="img">
              <div class="tip" style="color: #2F81FE;">上传示例图</div>
              <div class="border">
                <van-image
                  width="200rem"
                  height="200rem"
                  :src="info.src"
                  @click="preview(info.src)"
                />
              </div>
            </div>

            <div class="img" v-if="kind == 1 || info.status != 1">
              <div class="tip" style="color: #ff4343;">验证图</div>
              <div class="border">
                <van-image
                  width="200rem"
                  height="200rem"
                  :src="info.src1"
                  @click="preview(info.src1)"
                />
              </div>
            </div>

            <div class="img" v-if="!kind && info.status == 1">
              <div class="tip" style="color: #ff4343;">添加验证图</div>
              <div class="border">
                <van-uploader
                  :before-read="beforeRead"
                  v-model="fileList"
                  multiple
                  :max-count="1"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="btn-box">
      <div class="u-flex-center" v-if="!kind && info.status == 3">
        <div class="btn btn-1" @click="noGree">维权</div>
        <div class="btn btn-2" @click="confirm">确认</div>
      </div>

      <div class="u-flex-center" v-if="kind == 1 && info.status == 2">
        <div class="btn btn-1" @click="unagree">验证不合格</div>
        <div class="btn btn-2" @click="confirm">验证合格</div>
      </div>

      <div class="u-flex-center" v-if="!kind && info.status == 1">
        <div class="btn btn-3" @click="acceptTask">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import header from "@/components/header/header.vue";
import { Field } from "vant";
import axios from "axios";
import QRCode from "qrcodejs2";
import { getLocalStorage } from "@/util/local-storge.js";
import * as imageConversion from "image-conversion";

import {
  Button,
  Toast,
  Image as VanImage,
  Cell,
  CellGroup,
  Uploader,
} from "vant";
import { API_PATH } from "@/api/index.js";
import { ImagePreview } from "vant";
import {
  TASK_ACCEPT_LIST,
  TASK_ACCEPT,
  TASK_ACCPT_FILE,
  TASK_SUBMIT,
  TASK_CONFIRM,
  TASK_UNAGREE,
  TASK_NOAGREE,
} from "@/api/api.js";
// import { Field } from 'vant';
Vue.use(Field);
Vue.use(VanImage);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Uploader);
Vue.use(Toast);
Vue.use(ImagePreview);
export default {
  name: "jiedan",
  components: {
    [header.name]: header,
    [Button.name]: Button,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  data() {
    return {
      value1: "",
      value2: "",
      fileList: [],
      id: "",
      info: "",
      type: "",
      src: "",
      src1: "",
      kind: "",
      defaults: require("../.././assets/images/avator.png"),
    };
  },
  created() {
    let id = this.$route.query.id;
    this.id = id;
    if (this.$route.query.type) {
      let kind = this.$route.query.type;
      this.kind = kind;
    }
    this.getDetail(id);
  },
  mounted() {},
  methods: {
    async getDetail(id) {
      const { data } = await this.$reqGet(TASK_ACCEPT_LIST + "/" + id, {});
      if (data.status == 1) {
        let info = data.data;
        // 生成二维码
        this.qrcode = new QRCode("qrcode", {
          text: info.task_link,
          width: 100,
          height: 100,
        });

        info["src"] = info.job_verify_imgs[0].url;
        if (info.order_verify_imgs.length) {
          info["src1"] = info.order_verify_imgs[0].url;
        }
        this.info = info;
      }
    },
    preview(url) {
      ImagePreview([url]);
    },
    async acceptTask() {
      // 图片上传
      if (!this.fileList.length) {
        Toast.fail("请上传图片");
        return;
      }
      let a = this.fileList[0].file;
      console.log(a);
      let param = new FormData();
      param.append("file", a);
      let that = this;
      // let file = JSON.parse(JSON.stringify(this.fileList));
      axios
        .post(
          `${API_PATH + TASK_ACCPT_FILE + this.id + "&upload=true"}`,
          param,
          {
            headers: {
              "Content-Type": "multipart/form-data",
              "auth-token": getLocalStorage("user_token").user_token,
            },
          }
        )
        .then(
          function(res) {
            console.log(res);
            if (res.data.status == 1) {
              that.publish(res.data.data.filename);
            } else {
              Toast.fail(res.data.info);
            }
          },
          function(response) {}
        );
    },
    async publish(datas) {
      const { data } = await this.$reqPost(TASK_SUBMIT + "/" + this.id, {
        verify_imgs: datas,
      });

      if (data.status == 1) {
        let that = this;
        Toast.success({
          message: "接单成功!",
          onClose: function() {
            that.$router.push({ name: "orderList" });
          },
        });
      } else {
        Toast.fail(data.info);
      }
    },
    async unagree() {
      const { data } = await this.$reqPost(TASK_UNAGREE + "/" + this.id, {
        failure_reason: "验证不合格",
      });
      if (data.status == 1) {
        let that = this;
        Toast.success({
          message: "提交成功!",
          onClose: function() {
            that.$router.push({ name: "publishList" });
          },
        });
      } else {
        Toast.fail(data.info);
      }
    },
    async confirm() {
      const { data } = await this.$reqPost(TASK_CONFIRM + "/" + this.id, {});
      if (data.status == 1) {
        let that = this;
        Toast.success({
          message: "已完成!",
          onClose: function() {
            that.$router.push({ name: "publishList" });
          },
        });
      } else {
        Toast.fail(data.info);
      }
    },
    async noGree() {
      const { data } = await this.$reqPost(TASK_NOAGREE + "/" + this.id, {});
      if (data.status == 1) {
        let that = this;
        Toast.success({
          message: "维权申请已提交!",
          onClose: function() {
            that.$router.push({ name: "publishList" });
          },
        });
      } else {
        Toast.fail(data.info);
      }
    },
    beforeRead(file) {
      // 上传之前校验
      return new Promise((resolve, reject) => {
        // console.log('压缩前', file) // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        console.log("压缩前", file);
        imageConversion.compressAccurately(file, 30).then((res) => {
          // console.log(res)
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          console.log("压缩后", res);
          resolve(res);
        });
      });
    },
    onCopy: function(e) {
      Toast("复制成功！");
    },
    onError: function(e) {
      Toast("复制失败！");
    },
  },
};
</script>

<style lang="scss" scoped>
.jd_detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-size: 28rem;

  .bg {
    height: 320rem;
    background: linear-gradient(
      180deg,
      #2f81fe 80%,
      rgba(47, 129, 254, 0) 100%
    );
  }

  .main {
    position: relative;

    .info {
      border-radius: 20rem;
      background-color: #fff;
      margin: 24rem;
      padding: 24rem;

      .itemList {
        .item {
          margin-left: 34rem;

          .title1 {
            .name {
              font-size: 34rem;
              font-weight: bold;
            }
          }

          .title2 {
            text-align: left;
            font-size: 28rem;
            color: #999;
          }
        }

        .statu_order {
          display: inline-block;
          color: #fff;
          width: 100rem;
          height: 40rem;
          text-align: center;
          line-height: 40rem;
          border-radius: 20rem;
        }

        .statu {
          .price {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-bottom: 4rem;
            font-size: 28rem;
            color: #ff4343;
            font-weight: bold;

            .van-image {
              margin-left: 10rem;
            }
          }
        }
      }
    }

    .taskStep {
      text-align: left;
      border-radius: 20rem;
      background-color: #fff;
      margin: 0 24rem;
      overflow: hidden;
      padding-bottom: 24rem;

      .title {
        height: 92rem;
        padding: 22rem 24rem 0 24rem;
        background: #f3f7fe;
        font-weight: bold;
        font-size: 32rem;
      }

      .content {
        padding: 24rem;

        .tips {
          font-size: 28rem;
        }

        .copy-box {
          margin-top: 24rem;

          .url {
            font-size: 28rem;
            height: 88rem;
            width: 520rem;
            background: #f5f5f5;
            padding-left: 30rem;
            border-radius: 16rem;
          }

          .btn {
            width: 110rem;
            height: 88rem;
            border-radius: 16rem;
            background-color: var(--theme);
            justify-content: center;
            font-size: 28rem;
            color: #fff;
          }
        }

        .code {
          margin-top: 24rem;
          margin-bottom: 48rem;
          width: 200rem;
          height: 200rem;
        }

        .img-box {
          .img {
            flex: 1;

            /deep/ .van-uploader {
              width: 200rem;
              height: 200rem;

              .van-uploader__upload {
                margin: 0;
                width: 200rem;
                height: 200rem;

                input {
                  width: 200rem;
                  height: 200rem;
                }
              }
            }

            .border {
              width: 200rem;
              height: 200rem;
              overflow: hidden;
              border-radius: 16rem;
            }

            .tip {
              margin-top: 28rem;
              margin-bottom: 14rem;
            }
          }
        }
      }
    }
  }

  .btn-box {
    margin-top: 60rem;
    padding-bottom: 60rem;

    .u-flex-center {
      .btn {
        width: 340rem;
        height: 88rem;
        border-radius: 44rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 32rem;
        box-shadow: 0px 4rem 12rem rgba(75, 150, 255, 0.3);
        font-weight: bold;

        &:nth-child(1) {
          margin-right: 22rem;
        }

        &-1 {
          background: linear-gradient(134deg, #fdc300 0%, #ff910f 100%);
        }

        &-2 {
          background: linear-gradient(145deg, #2cb1ff 0%, #2f81fe 100%);
        }

        &-3 {
          width: 100%;
          margin-left: 24rem;
          background: linear-gradient(134deg, #fdc300 0%, #ff910f 100%);
        }
      }
    }
  }
}
</style>
